<template>
<div class="tab-bar-item" @click="itemClick">
  <!-- 具名插槽： 图标文字 -->
  <!-- 外部如果使用slot插槽会直接将slot标签直接替换，所以需要一个div保留样式 一层封装-->
  <div v-if="!isActive"><slot name="item-icon"></slot></div>
  <div v-else><slot name="item-icon-active"></slot></div>
  <!-- 无法动态绑定css 直接动态绑定style样式 -->
  <!-- <div :class="{active: isActive}"><slot name="item-text"></slot></div> -->
  <div :style="activeStyle"><slot name="item-text"></slot></div>
</div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props: {
    path: {
      type: String,
      default: ''
    },
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  data() {
    return {
      // isActive: false,
      // path: '/home'
    }
  },
  computed: {
    /* 激活状态 */
    isActive() {
      // 判断活跃的path是否为当前path
      // indexOf() 什么在什么里面 在返回0 反之返回-1
      const flag = this.$route.path.indexOf(this.path)
      // 如果flag == 0 != -1 ：激活状态 true
      // 如果flag == -1 : 未激活状态 false
      return flag != -1
    },
    /* 样式绑定 */
    activeStyle() {
      // 三目判断：如果当前为激活状态添加父组件传递样式对象 反之返回空对象{}
      return this.isActive ? {'color': this.activeColor} : {}
    }
  },
  methods: {
    itemClick() {
      // 1. 重复点击报错 捕获报错事件
      // this.$router.replace(this.path).catch(err => {
      //   console.log(err)
      // })

      // 2. 设置只有活跃路径不等于当前路径时才进行路径跳转
      // if(this.$route.path != this.path)
      if(!this.isActive)
      {
        this.$router.replace(this.path)
      } 
    }
  }
}
</script>

<style>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;

    font-size: 14px;
  }

  .tab-bar-item img {
    width: 24px;
    height: 24px;
    /* 距离item顶部相隔5像素 */
    margin-top: 5px;
    margin-bottom: 2px;

    /* 去掉img自带的3个像素 */
    vertical-align: middle;
  }
</style>